<template>
  <!-- 未签署 / 已签署   责任书详情 -->
  <view class="liabilityDetails">
    <view
      class="wrapper"
      :style="{ height: options.index == 0 ? 'calc(100vh - 87px)' : '' }"
    >
      <view class="bookTitle">{{ options.documentName }}</view>
      <view
        class="bookCon"
        style="white-space: pre-wrap"
        v-html="options.content"
      >
      </view>

      <view class="bookSeal">
        <view class="zhangzi">
          <view class="unit">
            <view style="display: flex">
              <view style="min-width: 160rpx"> 单位/社区： </view>
              <view class="unitName">{{ options.companyName }}</view>
            </view>
            <view class="legalPerson">
              负责人：
              <image
                :src="imgPrefix + options.companySignatureUrl"
                mode="aspectFill"
                v-if="options.companySignatureUrl"
              ></image>
            </view>
          </view>
          <view class="police-data">
            <view class="commonSeal_img">
              <image
                :src="imgPrefix + options.policeSealUrl"
                mode="aspectFill"
              ></image>
            </view>
            <view class="commonSeal"> 派出所公章 </view>
            <view class="commonTime">
              <block v-if="options.index != 0">
                {{ formatters(options.createTime, "wordDay") }}
              </block>
              <block v-else>
                年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日
              </block>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="btns" v-if="options.index == '0'">
      <button
        class="submit-btn"
        type="primary"
        :data-url="`/selfInfo/liabilityStatement/liabilitySignature?companyId=${options.companyId}&versionId=${options.documentVersionId}`"
        @click="handleClickRouter"
        icon="map"
        style="width: 100%"
      >
        已阅读并同意责任书内容
      </button>
    </view>
  </view>
</template>

<script>
import { handleClickRouter, formatters } from "@/utils/util.js";

export default {
  name: "liabilityDetails",
  data() {
    return {
      options: {},
      baseImgUrl: this.$baseImgUrl,
      imgPrefix: uni.getStorageSync("imgPrefix"),
    };
  },
  onShow() {
    this.options = uni.getStorageSync("liabilityCurrent");

    this.options.content = this.options.content.replace(
      /img/g,
      'img style="max-width:100%;height:auto"'
    );
  },
  methods: {
    handleClickRouter,
    formatters,
  },
};
</script>

<style lang="scss" scoped>
.liabilityDetails {
  flex: 1;
  background: #f6f6f6;
  .wrapper {
    margin: 16rpx 24rpx;
    padding: 34rpx 30rpx 15rpx;
    overflow-y: auto;
    height: 97vh;
    border: 1px solid #7d4c4f;
    background: #faf6f5;

    .bookTitle {
      word-break: break-all;
      text-align: center;
      font-size: 36rpx;
      font-weight: bold;
    }

    .bookCon {
      padding-top: 15rpx;
      font-size: 28rpx;
      line-height: 50rpx;

      image {
        width: 100%;
      }
    }

    .bookSeal {
      .zhangzi {
        display: flex;
        justify-content: space-between;
        padding: 20rpx 0;

        .unit {
          flex: 1;
          .unitName {
            font-size: 28rpx;
            font-weight: bold;
          }

          .legalPerson {
            padding-top: 20rpx;
            image {
              vertical-align: middle;
              width: 220rpx;
              height: 105rpx;
            }
          }
        }

        .police-data {
          position: relative;
          width: 220rpx;
          text-align: right;

          .commonSeal_img {
            image {
              width: 190rpx;
              height: 197rpx;
            }
          }

          .commonSeal {
            position: absolute;
            top: 0rpx;
            right: 30rpx;
          }

          .commonTime {
            position: absolute;
            top: 50rpx;
            right: 0rpx;
          }
        }
      }
    }
  }
}
</style>
